<template>
  <div class="main-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <button class="new-chat-button" @click="newChat">新建对话</button>
    </div>

    <!-- 对话界面 -->
    <div class="dialogue-container">
      <!-- 对话显示区域 -->
      <div class="messages" ref="messages">
        <div
          v-for="(message, index) in this.messages"
          :key="index"
          :class="['message', message.role]"
        >
          {{ message.content }}
        </div>
      </div>

      <!-- 输入框 -->
      <div class="input-area">
        <input
          v-model="userInput"
          type="content"
          placeholder="输入你的消息..."
          @keyup.enter="sendMessage"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      AiDto: { messages: [] },
      Chat: {
        message:"",
        mode:"chat",
      },
      message: [],
      userInput: "", // 用户输入
      messages: [], // 对话记录
      botResponses: "",
      isTyping: false, // 是否正在打字
    };
  },
  methods: {
    async initializePhStudent(data) {
      // let res = await this.$api.doAi(data);
      let res = await this.$api.doChat(data);
      this.botResponses = res.data.data;
      this.typeMessage(this.botResponses); // 逐字显示消息
      console.log("返回值：" + JSON.stringify(res.data.data));
    },
    sendMessage() {
      if (this.userInput.trim() === "") return;

      // 添加用户消息
      this.messages.push({ content: this.userInput, role: "user" });

      this.AiDto.messages = [{ content: this.userInput, role: "user" }];
      this.Chat.message = this.userInput;
      this.userInput = ""; // 清空输入框

      // 模拟机器人回复
      setTimeout(() => {
        // const randomResponse =
        //   this.botResponses[
        //     Math.floor(Math.random() * this.botResponses.length)
        //   ];
        //调用接口，返回返回值
        // this.initializePhStudent(this.AiDto);
        this.initializePhStudent(this.Chat);
      }, 50);

    },
    // 逐字显示消息
    typeMessage(message) {
      this.isTyping = true; // 开始打字
      const messageObj = { content: "", role: "system" }; // 初始化消息对象
      this.messages.push(messageObj); // 添加到消息列表
      let index = 0;
      const interval = setInterval(() => {
        if (index < message.length) {
          messageObj.content += message[index]; // 逐字添加
          index++;
          // 滚动到底部
          this.$nextTick(() => {
            const messagesContainer = this.$refs.messages;
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
          });
        } else {
          clearInterval(interval); // 停止打字
          this.isTyping = false; // 结束打字
        }
      }, 50); // 每 100ms 显示一个字
    },
    // 新建对话
    newChat() {
      console.log("新建对话按钮被点击"); // 调试信息
      this.messages = []; // 清空对话记录
    },
  },
};
</script>
  
  <style scoped>
/* 全局设置 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 主容器 */
.main-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，对话界面占满剩余空间 */
  height: 100vh;
  width: 80vw;
}

/* 侧边栏 */
.sidebar {
  background-color: #f0f0f0;
  border-right: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
}

/* 新建对话按钮 */
.new-chat-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.new-chat-button:hover {
  background-color: #0056b3;
}

/* 对话容器 */
.dialogue-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

/* 对话区域 */
.messages {
  flex: 1; /* 占满剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
  width: 100%; /* 宽度占满父容器 */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 20px;
}

/* 消息样式 */
.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
  max-width: 80%;
  word-wrap: break-word; /* 长文本换行 */
}

.message.user {
  background-color: #e1f5fe;
  margin-left: auto; /* 用户消息靠右 */
}

.message.bot {
  background-color: #f0f0f0;
  margin-right: auto; /* 机器人消息靠左 */
}

/* 输入框区域 */
.input-area {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 85%; /* 宽度占满父容器的 85% */
  max-width: 800px; /* 最大宽度限制 */
  margin-left: auto; /* 居中 */
  margin-right: auto; /* 居中 */
}

.input-area input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-area button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #0056b3;
}
</style>